<!--
 * @Author: your name
 * @Date: 2020-07-29 15:24:06
 * @LastEditTime: 2020-08-28 17:54:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\dic\Index.vue
--> 
<template>
    <div style="height:100%">
        <el-row style="height:100%;">
            <el-col :span="8">
                <div>
                    <!-- 这里的新增是从根节点新增 -->
                    <el-button size="small" type="primary" @click="openAddDic">新增</el-button>
                    <el-button size="small" type="warning">修改</el-button>
                    <el-button size="small" type="danger" >删除</el-button>
                </div>
                <div>
                    <el-tree @node-click="showDicDetail" :data="treeData" :props="treeProps">

                    </el-tree>
                </div>
            </el-col>
            <el-col :span="16">
                <div style="width:100%;">
                    title
                </div>
                <div>
                    <el-button size="small" type="primary" @click="openAddDicDetail"  >添加</el-button>
                </div>
                <el-table :data="dicDetailList" border  >
                  <el-table-column label="字典名称" prop="dicDetailName"></el-table-column>
                  <el-table-column label="字典值" prop="dicDetailValue"></el-table-column>
                  <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status==1" type="success">在用</el-tag>    
                        <el-tag v-else type="danger">停用</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                      <template slot-scope="scope">
                          <el-button type="text">修改</el-button>
                          <el-button type="text">删除</el-button>
                      </template>
                  </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- dialog对话框 -->
        <el-dialog :visible.sync="showDialog" title="添加" width="20%" >
            <el-form :model="dic" ref="dic" label-width="120" >
              <el-form-item label="字典名称">
                  <el-input v-model="dic.dicName" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addDic" size="small">确定</el-button>
                  <el-button size="small">取消</el-button>
              </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 字典详情对话框 -->
        <el-dialog title="字典详情" :visible.sync="showDetailLog" width="25%" >
            <el-form :model="dicDetail" ref="dicDetail" label-width="120">
                <el-form-item label="展示名称">
                    <el-input v-model="dicDetail.dicDetailName" size="small" ></el-input>
                </el-form-item>
                <el-form-item label="值">
                    <el-input v-model="dicDetail.dicDetailValue" size="small" ></el-input>
                </el-form-item>

                <el-form-item label="说明">
                    <el-input v-model="dicDetail.dicDetailDes" size="small" ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="addDicDetail" >添加</el-button>
                    <el-button size="small" @click="closeDialog" >取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>


<script>
import {dicAdd,dicList,dicDetailListByDicId,dicDetailAdd} from '@/api/index';    
export default {    
    name:'dicList',
    data() {
        return {
            treeData:[],
            treeProps:{
                children:'children',
                label:'dicName',
            },
            dicDetailList:[],
            showDialog:false,
            showDetailLog:false,
            dic:{
                dicName:'',
            },
            dicId:'',//当前展示字典
            dicDetail:{
                dicDetailId:'',
                dicId:'',
                dicDetailName:'',
                dicDetailDes:'',
                dicDetailValue:'',
                status:''
            }
        }
    },
    mounted() {
        this.initDicList();
    },
    methods: {
        openAddDic(){
            this.showDialog = true;
        },
        closeDialog(){
            this.showDialog = false;

            this.showDetailLog = false;
        },
        addDic(){
            //验证字段

            //添加字典
            dicAdd(this.dic).then((result) => {
                if(result.status == 200){
                    this.closeDialog();
                    //并刷新左侧菜单树
                    this.initDicList();
                }    
            })

        },
        initDicList(){
            dicList().then((result) => {
                if(result.status == 200){
                    let list = result.data.data;
                    this.treeData = list;
                }      
            })
        },
        //展示字典详情
        showDicDetail(obj,node,component){
            console.log(node);
            let dicId = node.data.dicId;
            this.dicId = dicId;
            dicDetailListByDicId(dicId).then((result) => {
                if(result.status == 200){
                    let list = result.data.data;
                    this.dicDetailList = list;
                }  
            })
        },
        flushDetail(dicId){
            dicDetailListByDicId(dicId).then((result) => {
                if(result.status == 200){
                    let list = result.data.data;
                    this.dicDetailList = list;
                }  
            })
        },
        //添加字典详情
        openAddDicDetail(){
            this.showDetailLog = true;
        },
        addDicDetail(){
            //验证参数
            this.dicDetail.dicId = this.dicId;
            dicDetailAdd(this.dicDetail).then((result) => {
                if(result.status == 200){
                    this.$message({
                        type:'success',
                        message:'操作成功'
                    });
                    this.closeDialog();
                    this.flushDetail(this.dicDetail.dicId);
                }  
            })
        }
    },

}
</script>

<style scoped>
    
</style>